/*
 * 图标集类型和属性：https://react-native-training.github.io/react-native-elements/docs/icon.htm
 * web方案：https://google.github.io/material-design-icons/
 * 备注：关于此web的icon和app react-native-elements的Icon有参数有差异的地方，在项目中进行补全和差异化处理
 * --Lucia
 * */

import React, { Component } from "react"
import { px2dp } from "../../utils"

interface ElementsIconProp {
  size: number
  name: string
  type?: string // 图标集的分类
  color?: string
  iconStyle?: object
  containerStyle?: object
}

export class ElementsIcon extends Component<ElementsIconProp, {}> {
  render() {
    let { type = "material", name, color, iconStyle, size, containerStyle } = this.props

    return (
      <span style={{ display: "inline-block", ...containerStyle }}>
        <i
          className={`${type}-icons`}
          {...this.props}
          style={{
            ...iconStyle,
            color,
            height: px2dp(size),
            width: px2dp(size),
            fontSize: px2dp(size)
          }}
        >
          {name}
        </i>
      </span>
    )
  }
}
